

<template>
	<view class="user-login">
		<view class="login-type">
				<view class="title">{{tabMeta.title}}</view>
				<view class="type">
					<text @click="changeLoginType">{{tabMeta.subTitle}}</text>
					<text class="iconfont icon-caret"></text>
				</view>
		</view>
	<!-- 账号登录 -->
		<uni-forms class="login-form" ref="form" v-if="tabIndex === 0">
			<uni-forms-item name="name">
				<input
					type="text"
					placeholder="请输入账号"
					class="uni-input-input"
					placeholder-style="color: #818181"
					v-model="formDate.account"
				/>
			</uni-forms-item>
			<uni-forms-item name="name">
				<input
					type="text"
					placeholder="请输入密码"
					class="uni-input-input"
					placeholder-style="color: #818181"
					v-model="formDate.password"
				/>
			</uni-forms-item>
			<button class="submit-button" @click="submitLogin">登录</button>
		</uni-forms>
	<!-- 手机号登陆 -->
		<uni-forms class="login-form" ref="form" v-else>
			<uni-forms-item name="name">
				<input
					type="text"
					placeholder="请输入手机号"
					class="uni-input-input"
					placeholder-style="color: #818181"
				/>
			</uni-forms-item>
			<uni-forms-item name="name">
				<input
					type="text"
					placeholder="请输入验证码"
					class="uni-input-input"
					placeholder-style="color: #818181"
				/>
				<text class="text-button">获取验证码</text>
			</uni-forms-item>
			<button class="submit-button">登录</button>
		</uni-forms>
	</view>
</template>


<script setup>
import { postDriverLoginAPI } from '../../api/login'
import { ref, reactive, computed } from 'vue'
import { useUserStore } from "../../store";
const userStore = useUserStore();

  // 表单数据
const formDate= ref({account:'123456',password:'123456'})

	// 登录类型索引值
	const tabIndex = ref(0)
	// 表单相关数据
	const tabMetas = reactive([
		{
			title: '账号登录',
			subTitle: '手机号登陆',
		},
		{
			title: '手机号登录',
			subTitle: '账号登录',
		},
	])
	// 表单效验
	// 定义表单数据验证规则
	const accountRules = reactive({
    account: {
      rules: [
        { required: true, errorMessage: '请输入登录账号' },
        { pattern: '^[a-zA-Z0-9]{6,8}$', errorMessage: '登录账号格式不正确' },
      ],
    },
    password: {
      rules: [
        { required: true, errorMessage: '请输入登录密码' },
        { pattern: '^\\d{6}$', errorMessage: '登录密码格式不正确' },
      ],
    },
  })

	// 当前登录信息
	const tabMeta = computed(() => {
		return tabMetas[tabIndex.value]
	})

	// 切换登录类型
	function changeLoginType() {
		tabIndex.value = Math.abs(tabIndex.value - 1)
}

// 登录功能
const submitLogin = async () => {
  // 检查账号和密码是否为空
  if (formDate.value.account === '' || formDate.value.password === '') {
    uni.showToast({ title: "请输入账号和密码", icon: "none" });
    return;
  }
	const data = await postDriverLoginAPI(formDate.value)
	// console.log(res);
	userStore.setProfile(data);
	
	uni.showToast({ title: "登录成功" })
	setTimeout(() => {
		uni.switchTab({
			url: '/pages/user/user', // 要跳转的 tabBar 页面路径
			});
	
	}, 1500);
	}
</script>

<style lang="scss" scoped>
.user-login {
	padding: 66rpx;
}
.login-type {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	line-height: 1;
	margin: 40rpx 0 80rpx;

	.title {
		font-size: 40rpx;
		color: #000;
	}

	.type {
		color: red;
		font-size:30rpx;
		display: flex;
		align-items: center;
	}

	.icon-caret {
		font-size:20rpx;
	}
}
</style>
